<template>
  <div class="Audit">
    <main-frame :layoutDirection="'left'">
      <template #leftBox>
        <div class="leftBox">
          <div class="userInfo">
            <userCard
              :img="userInfo.avatar"
              :top-name="userInfo.account ? userInfo.account : '用户账号'"
              :second-name="userInfo.name ? userInfo.name : '用户昵称'"
            ></userCard>
            <div class="myFans">
              <i>我的身份：</i>
              <i><el-tag type="success" size="medium" effect="dark">尊贵的商家</el-tag> </i>
            </div>
          </div>
        </div>
      </template>
      <template #page><pageContent></pageContent></template>
    </main-frame>
  </div>

  <getBack :icon="getBackIcon"></getBack>
</template>

<script setup lang="ts">
import { CACHE_USERINFO } from "@/global/constants"
import { localCache } from "@/utils/cacheData"
import mainFrame from "@/components/main-frame/main-frame.vue"
import userCard from "@/components/UI-cnps/UI-card/uiCard-user/uiCard-user.vue"
import useRouterJump from "@/hooks/useRouterJump"
import pageContent from "@/views/main/Audit/cpns/pageContent.vue"
import getBack from "@/components/UI-cnps/getBack/getBack.vue"
import { onMounted, ref } from "vue"
import { getUserInfo } from "@/service/user/user"
const { routerJump } = useRouterJump()

const getBackIcon = {
  iconName: "ArrowLeftBold",
  iconColor: "#909399",
  iconSize: "32px"
}

let userInfo = ref<IUserInfo>({
  id: 0,
  account: "",
  name: "",
  address: null,
  authority: [
    {
      id: 1,
      name: "Common"
    }
  ],
  avatar: null,
  createTime: "",
  fans_counts: 0
})

/**
 * 请求用户信息
 */
function reqGetUserInfo() {
  getUserInfo().then((res) => {
    if (res.data.code == 200) {
      userInfo.value = res.data.data.userInfo
      localCache.setCache(CACHE_USERINFO, res.data.data.userInfo)
    }
  })
}

onMounted(() => {
  reqGetUserInfo()
})
</script>

<style lang="less" scoped>
.Audit {
  background-color: #ecf5ff;
  padding: 40px 0;
  .leftBox {
    width: 260px;
    background-color: #fff;
    border-radius: 10px;
    .userInfo {
      width: 260px;
      margin: 0 auto;
      // border-radius: 20px;
    }

    // 我的粉丝
    .myFans {
      padding: 20px;
      color: #999999;
      text-align: center;
      font-size: 16px;
      i {
        &:nth-child(1) {
          font-size: 18px;
          letter-spacing: 0.75px;
          font-weight: 600;
          color: #777;
        }
      }
    }
  }
}
</style>
